<template>
	<div class="recommendation">
		<h3 class="subtitle">排行榜</h3>
		<router-link
			v-for="(item, index) in host_list"
			:key="item.id"
			:to="`/news/${item.id}`"
			class="recommend-item"
			@click.prevent="handleClick(item.id)"
		>
			<span class="order">{{ index + 1 }}.</span>
			{{ item.title }}
		</router-link>
		<h3 class="subtitle">热门推荐</h3>
		<router-link
			v-for="(item, index) in recomm_list"
			:key="item.id"
			:to="`/news/${item.id}`"
			class="recommend-item"
			@click.prevent="handleClick(item.id)"
		>
			<span class="order">{{ index + 1 }}.</span>
			{{ item.title }}
		</router-link>

	</div>
</template>
<script setup lang="ts">
import { onMounted, ref } from 'vue'
import { useRouter } from 'vue-router'
import { hot_ranking, recommendations } from '/@/api/news'



const router = useRouter()
const host_list = ref([])
const recomm_list = ref([])
const loading = ref(true)
const error = ref(false)

const handleClick = (id: number) => {
	router.push(`/news/${id}`)
}

onMounted(async () => {
	try {
		const res = await hot_ranking()
		host_list.value = res.data.slice(0, 10) // 限制显示数量

		const ress = await recommendations()
		recomm_list.value = ress.data.slice(0, 10) // 限制显示数量
	} catch (e) {
		error.value = true
		console.error('获取推荐失败', e)
	} finally {
		loading.value = false
	}
})
</script>
<style scoped lang="scss">
.recommendation {
	position: fixed;
	right: 0;
	bottom: 0;
	width: 280px;
	background: #fff;
	border-radius: 8px;
	box-shadow: 0 2px 12px rgba(0,0,0,0.1);
	padding: 1rem;

	.subtitle {
		color: #2c3e50;
		font-size: 1.1rem;
		font-weight: 600;
		margin-bottom: 1rem;
		padding-bottom: 0.5rem;
		border-bottom: 2px solid #f0f2f5;
	}

	.recommend-item {
		display: block;
		padding: 4px 0;
		color: #34495e;
		font-size: 0.95rem;
		line-height: 1.4;
		transition: all 0.2s;
		text-decoration: none;
		cursor: pointer;

		&:hover {
			color: #3498db;
			transform: translateX(5px);
		}

		.order {
			color: #7f8c8d;
			margin-right: 0.3rem;
		}
	}

	.skeleton-item {
		height: 20px;
		background: #f0f2f5;
		margin: 0.8rem 0;
		border-radius: 4px;
		animation: pulse 1.5s infinite;
	}

	.empty-tip {
		color: #95a5a6;
		font-size: 0.9rem;
		text-align: center;
		padding: 1rem 0;
	}
}

@keyframes pulse {
	0% { opacity: 1 }
	50% { opacity: 0.5 }
	100% { opacity: 1 }
}
</style>
